<template>
	<view>
		<view class="upper">
			<view class="upper-title">卡券管理</view>
			<view class="upper-content">
				<view class="left">
					<view class="left-num">{{cardVoucherList.length}}</view>
					<view class="left-type">代金券卡券数量<u-icon name="arrow-down" style="margin-left: 15rpx;"></u-icon></view>
				</view>
				<view class="right" @click="addCoupon">
					<u-icon name="plus" class="right-icon"></u-icon>
				</view>
			</view>
		</view>
		<view class="content" v-if="cardVoucherList.length > 0">
			<view class="content-item" v-for="item in cardVoucherList">
				<view v-if="item.name=='代金券'" class="item-leftIcon bc-red"><i class="iconfont icon-qiaquan"></i></view>
				<view  v-else-if="item.name=='优惠券'" class="item-leftIcon bc-green"><i class="iconfont icon-qiaquan"></i></view>
				<view  v-else class="item-leftIcon bc-blue"><i class="iconfont icon-qiaquan"></i></view>
				<view class="item-middle" >
					<view class="item-nickName">{{item.name}}</view>
					<view class="item-date">{{item.date}}</view>
				</view>
				<view class="item-shareIcon">
					<i class="iconfont icon-fenxiang"></i>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="none">
				<image src="../../static/coupon/none.png" mode=""></image>
				<text class="none-word">暂无优惠券哦&nbsp;~</text>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			num: 0,
			cardVoucherList:[
				{
					name: "优惠券",
					date: '2021.09.03',
					id: 1
				},
				{
					name: "代金券",
					date: '2021.09.03',
					id: 2
				},
				{
					name: "折扣券",
					date: '2021.09.03',
					id: 3
				}
			]
		}
	},
	computed:{
		// whatBc(){
		// 	return function(color){
		// 	  return color == '绿色' ?  'bc-green' : 'bc-red'
		// 	}
		// },
	},
	methods:{
		// whatBc(color){
		// 		switch(color){
		// 			case '绿色':
		// 				return 'bc-green';
		// 				break;
		// 			case '红色':
		// 			    return 'bc-red';
		// 				break;
		// 			default:
		// 			    return ''
		// 		}
		// },
		addCoupon(){
			uni.navigateTo({
				url:"./addCoupon"
			})
		}
	}
}
</script>

<style lang="scss">
	.bc-green{
		background-color: #00D793;
	}
	.bc-red{
		background-color: #FF7E87;
	}
	.bc-blue{
		background-color: #2B85E4;
	}
	.upper{
		height: 462rpx;
		width: 100%;
		background-color: #6BAEFF;
		border-bottom-right-radius: 100rpx;
		padding: 20% 6%;
		.upper-title{
			height: 42rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			letter-spacing: 0.6rpx;
			color: #FFFFFF;
			line-height: 42rpx;
		}
		.upper-content{
			margin-top: 52rpx;
			display: flex;
			justify-content: space-between;
			.left{
				letter-spacing: 5.6rpx;
				.left-num{
					width: 76rpx;
					height: 100rpx;
					font-size: 72rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 100rpx;
				}
				.left-type{
					height: 36rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					letter-spacing: 3.6rpx;
					color: #FFFFFF;
					line-height: 36rpx;
				}
			}
			.right{
				width: 106rpx;
				height: 106rpx;
				background-color: #FFFFFF;
				border-radius: 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				.right-icon{
					font-size: 60rpx;
					color: #3d7fef;
					font-weight: 600;
				}
			}
		}
	}
	.content{
		width: 95%;
		margin: 0 auto;
		.content-item{
			width: 90%;
			margin: 30rpx auto 0;
			height: 112rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item-leftIcon{
				width: 82rpx;
				height: 80rpx;
				border-radius: 16rpx;
				margin-left: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.icon-qiaquan{
					font-size: 42rpx;
					margin-left: 13rpx;
					color: #FFFFFF;
				}
			}
			.item-middle{
				flex: 1;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-left: 40rpx;
				.item-nickName{
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #042C5C;
				}
				.item-date{
					font-size: 20rpx;
					font-family: Avenir-Roman, Avenir;
					font-weight: normal;
					color: #77869E;
					padding: 10rpx 0;
				}
			}
			.item-shareIcon{
				margin-right: 44rpx;
				display: flex;
				.icon-fenxiang{
					font-size: 44rpx;
					color: #6aa4f1;
				}
			}
		}
	}
	.none{
		width: 100%;
		height: 600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		image{
			width: 334rpx;
			height: 180rpx;
		}
		.none-word{
			height: 42rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(47, 47, 47, 0.75);
			line-height: 42rpx;
		}
	}
</style>
